<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人主页</title>
    <link rel="stylesheet" href="../css/index.css">
    <link rel="stylesheet" href="../css/personalPage.css">
    <link rel="stylesheet" href="../css/all.css">
    <link rel="stylesheet" href="../css/google-fonts.css">

    <!--    <link rel="stylesheet" href="../node_modules/mdbootstrap/css/bootstrap.min.css">-->
    <!--    <link rel="stylesheet" href="../node_modules/mdbootstrap/css/mdb.min.css">-->
    <!--    <link rel="stylesheet" href="../node_modules/mdbootstrap/css/style.css">-->

    <link rel="stylesheet" href="../MDB-Pro/css/bootstrap.min.css">
    <link rel="stylesheet" href="../MDB-Pro/css/mdb.min.css">
    <link rel="stylesheet" href="../MDB-Pro/css/style.css">
    <link rel="stylesheet" href="../MDB-Pro/css/mdb.lite.min.css">
</head>
<body style="background-color: #42464c">
<!-- 导入依赖-->
<script type="text/javascript" src="../node_modules/mdbootstrap/js/jquery.min.js"></script>
<script type="text/javascript" src="../node_modules/mdbootstrap/js/popper.min.js"></script>
<script type="text/javascript" src="../node_modules/mdbootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../node_modules/mdbootstrap/js/mdb.min.js"></script>

<!--<script type="text/javascript" src="../MDB-Pro/js/mdb.min.js"></script>-->
<!--<script type="text/javascript" src="../MDB-Pro/js/jquery.min.js"></script>-->
<!--<script type="text/javascript" src="../MDB-Pro/js/mdb.lite.min.js"></script>-->
<!--<script type="text/javascript" src="../MDB-Pro/js/bootstrap.min.js"></script>-->

<!--页面顶部信息栏-->
<div>
    <div class="bg-info clearfix" style="background-color: #26282c !important;">
        <!-- 标题-->
        <img style="margin-left: 20px" src="../img/logo.png">
        <h4 class="bar" style="color: #ffffff">聊天吧</h4>
        <div class="avatar-name">
            <!-- 头像-->
            <img class="avatar"
                 src="https://tse4-mm.cn.bing.net/th/id/OIP-C.icmtPAEBY4b34eRiPY8SQgAAAA?w=187&h=186&c=7&r=0&o=5&dpr=1.25&pid=1.7"
                 id="avatar0" onclick="personalSitting()">
            <!-- 名字-->
            <h5 class="name"><a class="name" id="name0" href="javascript:personalSitting()"
                                style="color: #ffffff">出错了</a></h5>
        </div>
        <button id="createRoomBtn" class="btn btn-primary createRoom" onclick="returnHomepage()">返回主页</button>
    </div>
</div>

<!--修改个人信息窗口(默认隐藏状态)-->
<div id="personalInfoPrompt">
    <div class="card prompt" style="height: 350px">
        <div class="card-body">
            <div>
                <!-- 名称 -->
                <h3 class="card-title">名称:</h3>
                <div class="form-outline mb-4">
                    <input type="text" id="name" class="form-control"/>
                </div>
                <!-- 头像 -->
                <h3 class="card-title">头像:</h3>
                <div class="form-outline mb-4">
                    <input type="text" id="avatar" class="form-control"/>
                </div>

                <!-- 按钮 -->
                <div>
                    <button class="btn btn-primary createRoom" onclick="confirmChange()">确认</button>
                    <button class="btn btn-secondary createRoom" onclick="cancelChange()">取消</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!--留言弹窗-->
<div class="sendMassage" id="sendMassage">
    <div class="card prompt" style="height: 300px">
        <div class="card-body">
            <div>
                <h3 class="card-title">留言:</h3>
                <!-- 留言内容 -->
                <div class="form-outline mb-4">
                    <textarea type="text" style="height: 100px" placeholder="请输入留言内容" class="form-control"
                              id="messagetextinfo"></textarea>
                </div>
                <!-- 按钮 -->
                <div>
                    <button class="btn btn-primary createRoom" onclick="confirmSend()">确认</button>
                    <button class="btn btn-secondary createRoom" onclick="cancelSend()">取消</button>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="friendList-messageBoard" id="friendList-messageBoard">
    <!--朋友列表-->
    <div class="friendList card">
        <h3 style="margin: 10px; color:#000;">朋友列表</h3>
        <!-- 朋友 -->
        <!--        <div class="friend card">-->
        <!--            <div>-->
        <!--                &lt;!&ndash; 头像 &ndash;&gt;-->
        <!--                <div style="display: inline-block;">-->
        <!--                    <img class="friend-avatar" id="friend-avatar"-->
        <!--                         src="https://tse4-mm.cn.bing.net/th/id/OIP-C.icmtPAEBY4b34eRiPY8SQgAAAA?w=187&h=186&c=7&r=0&o=5&dpr=1.25&pid=1.7">-->
        <!--                </div>-->
        <!--                &lt;!&ndash; 名字 &ndash;&gt;-->
        <!--                <div style="display: inline-block;">-->
        <!--                    <h4 class="friend-name" id="friend-name">名字名字</h4>-->
        <!--                </div>-->
        <!--                &lt;!&ndash; 按钮 &ndash;&gt;-->
        <!--                <div style="display: inline-block;margin: 10px;">-->
        <!--                    &lt;!&ndash; 留言按钮 &ndash;&gt;-->
        <!--                    <button class="btn btn-primary btn1" style="height: 40px;"-->
        <!--                            onclick="writeMessage(onmousedown())">留言-->
        <!--                    </button>-->
        <!--                    &lt;!&ndash; 删除按钮 &ndash;&gt;-->
        <!--                    <button class="btn btn-secondary btn1" style="height: 40px;  float: right;"-->
        <!--                            onclick="deleteMassage(onmousedown())">-->
        <!--                        删除-->
        <!--                    </button>-->
        <!--                </div>-->
        <!--            </div>-->
        <!--        </div>-->


    </div>

    <!--留言板-->
    <div class="messageBoard card">
        <h3 style="margin: 10px;color: #000000">留言板</h3>
        <!-- 留言列表 -->
        <div class="massageList">
            <!-- 留言 -->

<!--                        <div class="massage card" style="padding: 10px;margin: 10px;">-->
<!--                            <div>-->
<!--                                &lt;!&ndash; 头像 &ndash;&gt;-->
<!--                                <div style="display: inline-block">-->
<!--                                    <img class="avatar3"-->
<!--                                         src="https://tse4-mm.cn.bing.net/th/id/OIP-C.icmtPAEBY4b34eRiPY8SQgAAAA?w=187&h=186&c=7&r=0&o=5&dpr=1.25&pid=1.7">-->
<!--                                </div>-->

<!--                                <div style="display: inline-block; margin-left: 10px;">-->
<!--                                    &lt;!&ndash; 回复按钮（类同给朋友留言）&ndash;&gt;-->
<!--                                    <button class="btn btn-primary btn1" style="height: 42px;"-->
<!--                                            onclick="writeMessage(event)">回复-->
<!--                                    </button>-->
<!--                                    &lt;!&ndash; 留言日期 &ndash;&gt;-->
<!--                                    <h6 class="time">2022-6-19</h6>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            &lt;!&ndash; 留言内容 &ndash;&gt;-->
<!--                            <p class="text-md-start" style="margin: 10px;">&nbsp;&nbsp;&nbsp;&nbsp;-->
<!--                                留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容留言内容</p>-->
<!--                        </div>-->


        </div>
    </div>

</div>

<script>
    ///////////////////////////////////////////修改个人信息///////////////////////////////////////////////////////////////

    // 获取url里的参数
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] === variable) {
                return pair[1];
            }
        }
        return (false);
    }

    // 全局变量 用户uid
    let uid = getQueryVariable("uid");

    // 全局变量 留言接受者的id
    let receiverid;

    // 默认隐藏个人信息修改窗口
    document.getElementById("personalInfoPrompt").style.display = "none";
    document.getElementById("sendMassage").style.display = "none";

    // 获得头像和名字
    getPersonalInfo();

    ///////////////////////////////////////////修改个人信息///////////////////////////////////////////////////////////////

    // 修改个人信息
    function personalSitting() {
        // 显示修改信息窗口
        document.getElementById("friendList-messageBoard").style.display = "none";
        document.getElementById("personalInfoPrompt").style.display = "";
    }

    // 确认修改（发送更改请求）
    function confirmChange() {
        var name = $("#name").val();
        var photo = $("#avatar").val();

        if (name.length == 0 || photo.length == 0) {
            alert("不能输入空值")
        } else {
            $.ajax({
                url: "/personalPage/changeinfo",
                type: "post",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                async: false,
                data: JSON.stringify(
                    {
                        "name": name,
                        "photo": photo,
                    }
                ),
                success: function (data) {
                    if (data.er == 0) {
                        alert("修改成功");
                        window.location.href = "/views/personalPage.html?uid=" + uid;
                    } else {
                        alert("用户名重复，请重新修改");
                    }
                }
            })
        }

        // 隐藏修改信息窗口
        document.getElementById("personalInfoPrompt").style.display = "none";
        document.getElementById("friendList-messageBoard").style.display = "";
    }

    // 取消修改
    function cancelChange() {
        // 隐藏修改信息窗口
        document.getElementById("personalInfoPrompt").style.display = "none";
        document.getElementById("friendList-messageBoard").style.display = "";
    }

    // 得到头像和名字
    function getPersonalInfo() {
        $.ajax({
            url: "/index/personalInfo",
            type: "get",
            success: function (data) {
                let json = JSON.parse(data);
                let personalname = json.name;
                let personalavatar = json.photo;
                document.getElementById("name0").innerText = personalname;
                document.getElementById("avatar0").src = personalavatar;
                document.getElementById("name").value = personalname;
                document.getElementById("avatar").value = personalavatar;

            }
        })
    }

    ////////////////////////////////////////////朋友列表/////////////////////////////////////////////////////////////////
    // 页面加载时获取朋友列表

    // 朋友列表
    let friendList = [];
    getFriends();

    /**
     * 给朋友留言
     * @param event 当前点击对象或者当前点击对象ID
     */
    function writeMessage(event) {

        // 将全局变量留言接受者id
        receiverid = event;
        // 隐藏主窗口显示留言输入框
        document.getElementById("friendList-messageBoard").style.display = "none";
        document.getElementById("sendMassage").style.display = "";

    }

    // 删除朋友
    function deleteFriend(uid) {
        if (confirm("确定要删除此好友吗？")) {
            $.ajax({
                url: "/personalPage/deleteFriend?uid=" + uid,
                type: "get",
                success: function (data) {
                    let jsondata = JSON.parse(data);
                    if (jsondata.ans) {
                        alert("删除成功");
                        window.location.reload();
                    } else {
                        alert("删除失败");
                    }
                }
            })
        }
    }

    //获取好友信息列表
    function getFriends() {
        $.ajax({
            url: "/personalPage/getFriends?uid=" + uid,
            type: "get",
            success: function (data) {
                console.log(data, typeof data);
                friendList = JSON.parse(data).friendsList;
                for (let i = 0; i < friendList.length; i++) {
                    createSingleFriendCard(friendList[i]);
                }
            }
        })
    }

    // 创建好友列表
    function createSingleFriendCard(friend) {
        $(".friendList").append('<div class="friend card">\n' +
            '            <div>\n' +
            '                <!-- 头像 -->\n' +
            '                <div style="display: inline-block;">\n' +
            '                    <img class="friend-avatar" id="friend-avatar"\n' +
            '                         src=' + friend.userimage + '>\n' +
            '                </div>\n' +
            '                <!-- 名字 -->\n' +
            '                <div style="display: inline-block;">\n' +
            '                    <h4 class="friend-name" id="friend-name">' + friend.username + '</h4>\n' +
            '                </div>\n' +
            '                <!-- 按钮 -->\n' +
            '                <div style="display: inline-block;margin: 10px;">\n' +
            '                    <!-- 留言按钮 -->\n' +
            '                    <button class="btn btn-primary btn1" style="height: 40px;"\n' +
            '                            onclick="writeMessage(' + friend.uid + ')">留言\n' +
            '                    </button>\n' +
            '                    <!-- 删除按钮 -->\n' +
            '                    <button class="btn btn-secondary btn1" style="height: 40px;  float: right;"\n' +
            '                            onclick="deleteFriend(' + friend.uid + ')">\n' +
            '                        删除\n' +
            '                    </button>\n' +
            '                </div>\n' +
            '            </div>\n' +
            '        </div>');
    }

    ////////////////////////////////////////////留言板///////////////////////////////////////////////////////////////////

    // 留言内容
    let msgList = [];

    // 留言者，与留言内容一一对应
    let senderList = [];

    getMsgandSender();

    // 默认隐藏留言窗口
    document.getElementById("sendMassage").style.display = "none";
    // document.getElementById("friendList-messageBoard").style.display = "none";
    // document.getElementById("sendMassage").style.display = "";

    // 给朋友留言（直接调用上方的留言方法即可）

    // 留言提交
    function confirmSend() {
        let msginfo = document.getElementById("messagetextinfo").value;
        var time = Date.parse(new Date());
        $.ajax({
            url: "/personalPage/sendMessage",
            type: "post",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            async: false,
            data: JSON.stringify(
                {
                    "senderid": uid,
                    "receiverid": receiverid,
                    "messageinfo": msginfo,
                    "createtime": time,
                }
            ),
            success: function (data) {
                if (data.ans) {
                    alert("留言成功！")
                } else {
                    alert("留言失败")
                }
            }
        })


        // 隐藏留言窗口显示主窗口
        document.getElementById("sendMassage").style.display = "none";
        document.getElementById("friendList-messageBoard").style.display = "";
    }

    // 留言取消
    function cancelSend() {
        // 隐藏留言窗口显示主窗口
        document.getElementById("sendMassage").style.display = "none";
        document.getElementById("friendList-messageBoard").style.display = "";
    }

    // 得到留言板内容，留言者和创建留言板
    function getMsgandSender() {
        $.ajax({
            url: "/personalPage/getMessageBoard?uid=" + uid,
            type: "get",
            dataType: 'json',
            contentType: "application/json;charset=utf-8",
            async: false,
            success: function (data) {
                // let json=JSON.parse(data);
                console.log(data.msglist);
                console.log(data.senderlist);
                msgList = data.msglist;
                senderList = data.senderlist;
                for (let i = 0; i < msgList.length; i++) {
                    createMessageBoard(msgList[i], senderList[i]);
                }
            }
        })
    }

    //  创建留言板
    function createMessageBoard(msg, sender) {
        $(".massageList").append(' <div class="massage card" style="padding: 10px;margin: 10px;">\n' +
            '                <div>\n' +
            '                    <!-- 头像 -->\n' +
            '                    <div style="display: inline-block">\n' +
            '                        <img class="avatar3" src=' + sender.userimage + '>\n' +
            '                    </div>\n' +
            '                    <div style="display: inline-block; margin-left: 10px;">\n' +
            '                        <!-- 回复按钮（类同给朋友留言）-->\n' +
            '                        <button class="btn btn-primary btn1" style="height: 42px;"\n' +
            '                                onclick="writeMessage(' + sender.uid + ')">回复\n' +
            '                        </button>\n' +
            '                        <!-- 留言日期 -->\n' +
            '                        <h6 class="time" >'+sender.username+'  '+ msg.createtime + '</h6>\n' +
            '                    </div>\n' +
            '                </div>\n' +
            '                <!-- 留言内容 -->\n' +
            '                <p class="text-md-start" style="margin: 10px;">&nbsp;&nbsp;&nbsp;&nbsp;\n' +
            '                    ' + msg.messageinfo + '</p>\n' +
            '            </div>')
    }

    // 返回主页功能
    function returnHomepage() {
        window.location.href = "/views/index.html";
    }


</script>

</body>
</html>